<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>

      <el-steps :active="active" style="margin: 40px">
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="等待认证结果"></el-step>
      </el-steps>

      <div v-if="active === 0" class="user-borrower">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age"/>
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'"/>
              <el-option :value="0" :label="'女'"/>
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                  v-for="item in educationList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                  v-for="item in industryList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                  v-for="item in incomeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                  v-for="item in returnSourceList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName"/>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile"/>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                  v-for="item in contactsRelationList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload
                :on-success="onUploadSuccessIdCard1"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard1' }"
                :limit="1"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload
                :on-success="onUploadSuccessIdCard2"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard2' }"
                :limit="1"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload
                :on-success="onUploadSuccessHouse"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'house' }"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-upload
                :on-success="onUploadSuccessCar"
                :on-remove="onUploadRemove"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'car' }"
                list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>

        <el-form label-width="120px">
          <el-form-item>
            <el-button type="primary" :disabled="submitBtnDisabled" @click="save">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert title="您的认证申请已成功提交，请耐心等待" type="warning" show-icon :closable="false">
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>

      <div v-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert v-if="borrowerStatus === 2" title="您的认证审批已通过" type="success" show-icon :closable="false">
          </el-alert>
          <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
            <el-button style="margin-top:20px;" type="success">我要借款</el-button>
          </NuxtLink>

          <el-alert v-if="borrowerStatus === -1" title="您的认证审批未通过" type="error" show-icon :closable="false">
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const BASE_API = process.env.BASE_API

    return {
      active: null, //步骤
      borrowerStatus: null,
      submitBtnDisabled: false,
      //借款人信息
      borrower: {
        borrowerAttachList: [],
      },
      educationList: [], //学历列表
      industryList: [], //行业列表
      incomeList: [], //月收入列表
      returnSourceList: [], //还款来源列表
      contactsRelationList: [], //联系人关系
      uploadUrl: BASE_API + '/api/oss/file/upload', //文件上传地址
    }
  },

  created() {
    this.getUserInfo()
  },

  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$axios
          .$get('/api/core/borrower/auth/getBorrowerStatus')
          .then(response => {
            this.borrowerStatus = response.data.borrowerStatus
            // 未认证
            if (this.borrowerStatus === 0) {
              this.active = 0
              // 展示下拉列表
              this.initSelected()
            }
            // 认证中
            else if (this.borrowerStatus === 1) {
              this.active = 1
            }
            // 认证成功/认证失败
            else {
                this.active = 2
            }
          })
    },

    save() {
      this.submitBtnDisabled = true
      this.$axios
          .$post('/api/core/borrower/auth/save', this.borrower)
          .then((response) => {
            this.$message.success(response.message)
            this.active = 1
          })
    },

    // 上传回调
    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, 'idCard1')
    },

    onUploadSuccessIdCard2(response, file) {
      this.onUploadSuccess(response, file, 'idCard2')
    },

    onUploadSuccessHouse(response, file) {
      this.onUploadSuccess(response, file, 'house')
    },

    onUploadSuccessCar(response, file) {
      this.onUploadSuccess(response, file, 'car')
    },

    onUploadSuccess(response, file, type) {
      // debugger
      if (response.code !== 0) {
        this.$message.error(response.message)
        return
      }
      // 填充上传文件列表
      this.borrower.borrowerAttachList.push({
        imageName: file.name,
        imageUrl: response.data.url,
        imageType: type,
      })
    },

    onUploadRemove(file, fileList) {
      console.log('fileList', fileList)
      //删除oss服务器上的内容
      this.$axios
          .$delete('/api/oss/file/remove?url=' + file.response.data.url)
          .then(() => {
            console.log('远程删除')
            this.borrower.borrowerAttachList = this.borrower.borrowerAttachList
                .filter(function (item) {
                  console.log('item', item)
                  return item.imageUrl !== file.response.data.url
                })
          })
    },

    // 展示下拉列表
    initSelected() {
      // 学历列表
      const url = '/api/core/dict/findByDictCode';
      this.$axios
          .$get(`${url}/education`)
          .then((response) => {
            this.educationList = response.data.dictList
          })

      // 行业列表
      this.$axios
          .$get(`${url}/industry`)
          .then((response) => {
            this.industryList = response.data.dictList
          })

      // 收入列表
      this.$axios
          .$get(`${url}/income`)
          .then((response) => {
            this.incomeList = response.data.dictList
          })

      // 还款来源列表
      this.$axios
          .$get(`${url}/returnSource`)
          .then((response) => {
            this.returnSourceList = response.data.dictList
          })

      // 联系人关系列表
      this.$axios
          .$get(`${url}/relation`)
          .then((response) => {
            this.contactsRelationList = response.data.dictList
          })
    },
  },
}
</script>

<style scoped>

</style>
